<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 实例对象 </title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 ref="ele">{{msg}}</h2>
        <h3 id="one"> {{word}}</h3>
        <h2 v-on:click="a++">a == {{a}}</h2>
        <h2>b == {{b}}</h2>
        <h2>c == {{c}}</h2>
        <h2 @click="teardown"></h2>
    </div>
</body>
<script>
    var index = 0;
    const data = {
        msg: "Vue 实例对象 （new 指向的对象）",
        word: "dota 对象中的所有 property 加入到Vue 的响应式系统中",
        a: 1,
        b: 200,
        c: 111

    }
    // Object.freeze(data)  冻结数据

    const vm = new Vue({
        // el: "#app",
        data: data,
        methods: {
            log(msg) {
                console.log(`## ${++index} -- ${msg}`);
            },
            teardown() {
                vm.$destroy()
            }
        },
        props: [],
        beforeCreate() {
            console.log(this);
            console.log(this.a);    // 数据和方法都没有绑定
            // this.log("beforeCreate - 实例被创建之前")
            console.log(`## ${++index} -- beforeCreate - 实例被创建之前 `)

        },
        created() {
            this.log("created  实例被创建成功  属性和方法都已经绑定")
        },
        beforeMount() {
            // 所有的标签元素都是 虚拟DOM
            // console.log(document.getElementById("one"))
            // document.getElementById("one").style.color ="red"
            console.log(this.$refs);

            this.log("beforeMount - 实例被载入之间")
        },
        mounted() {
            // 所有的虚拟DOM 已经渲染成真实DOM   onload 
            // 真实DOM  
            // 请求ajax 
            this.$refs.ele.style.color = "green"
            document.getElementById("one").style.color = "red"
            this.log("mounted  - 实例被载完成  ")
        },
        beforeUpdate() {
            this.log("beforeUpdate  - 实例数据更新之前")
        },
        updated() {
            this.log("updated - 实例数据更新完成")
        },
        beforeDestroy() {
            this.log("beforeDestroy 实例被销毁之前")
        },
        destroyed() {
            // 清楚计时器
            this.log("destroyed 实例已经被销毁")
        }

    }).$mount("#app")    // vm实例 载入到app 

    console.log(vm)
    console.log(vm.$el)
    console.log(vm.$data)

    // vm.a == data.a
    // true
    // vm.a = 10
    // 10
    // data.a
    // 10
    // data.b = 2000
    // 2000
    // data.b == vm.b
    // ture
</script>
<!-- 
    每个 Vue 应用都是通过用Vue 函数创建一个新的Vue实例开始的
    设计模式(工厂模式 单例模式 混合模式 观察者模式 发布订阅模式)

    数据开发模式模型
    MVVM    M   model 数据模型 V view 视图界面 VM viewmodel 视图和数据混稀在一起（数据视图系统）
    MVC     M   model 数据模型 V view 视图界面 C controller 控制器（JS逻辑 方法和事件）
    MVP     M   model 数据模型 V view 视图界面 P Prestener 复杂逻辑


    选项对象{}
    选项对象属性（data el methods name watch computed filter component directive 10个生命周期钩子函数）


    vm
    实例对象    vm Vue.prototype  vm.__proto__
    实例属性    vm.$data  vm.$el
    实例方法 / 数据  vm.$emit   vm.$set
    实例方法 / 事件  vm.$emit   vm.$on
    实例方法 / 生命周期 vm.$nextTick  vm.$mount()  vm.$forceUpdate(强制刷新页面)
    el  vue 挂载元素 $mount("#app")

    data 对象
    响应式系统 （只要检测到数据更新，就一定会去修改视图）  组件系统
    1.当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中
    2.当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值（信响应式）

    vm 实例化后赋值 没有意义 没有被响应式视图系统监听

    所有需要用到的数据都必须在daa里面初始化 否则没有响应式监听
    借鉴MVVM

    VM 实例对象
    实例属性 
    vm.$el
    vm.$data
    实例方法
    vm.$watch   监听数据改变
    vm.$set     修改对象和数据刷新视图
    vm.$delete  删除对象和数组 刷新视图
    vm.$mount()
    vm.$destroy() 销毁
    vm.$forceUpdate
    vm.$nextTick

    ref 用来记录真实DOM this.$refs
    a.ref 用于标签 表示这个真实DOM对象
    b.ref 用于组件 表示这个组件对象

    初始化操作
    document.ready = function(){}
    window.onLoad = function(){}

    $(function(){

    })

    实例生命周期钩子
    买个Vue 实例在被创建时都要经过一系列的过程
    （实例创建  实例载入  实例更新  实例销毁）
    这些过程称为 实例生命周期 Vue 还在这个每个周期设置对应的函数去监听  这些函数就叫 生命周期钩子函数（HOOKS）
    Vue 内置一些生命周期钩子函数（function） 给了开发者在不同阶段添加自己代码的机会

    实例创建    beforeCreate    created     1   实例初始创建
    实例载入    beforeMount     mounted     1   初始化载入
    实例更新    beforeUpdate    updated     n   实例 里面 data 数据改变
    实例销毁    beforeDestroy   destroyer   1   实例被移除

    activated   激活
    deactivated 失活
    errorCaptured   错误捕获

    真实DOM ref
    Vue 创建实例之前 DOM树 先读取根元素 解析 所有的dom数据标签
    然后以 树形结构 把dom数据存储在内存（模板存储DOM）
    在内存中 描述 dom节点 的数据信息 叫做 虚拟DOM
    抽象定义
    虚拟DOM Virtual DOM （性能优化）

    优势    提升性能 提高加载速度
    缺点    多了一次 虚拟DOM初始化的算计（尽量第一次不要加载过多的数据）

    数据更新 patch diff算法 比较不同

    如果每次data改变 也接收数据更新
    Vue（核心DIfferent 算法）监测到数据改变 自动生成 新的虚拟DOM
    
    会去和旧的虚拟DOM进行对比 得到变更的部分 patch
    然后会把这patch 放到一个队列 最终批量更新 渲染成真实DOM
 -->

</html>